@mixin colorSystem {
  /* General Colors as on Figma. Do not add new colors here */
  /* Brand */
  --brand-primary: #1de8f5;
  --brand-primary-hover: #0db4be;
  --brand-secondary: #bfb3ff;
  --brand-secondary-hover: #dad5ff;
  --brand-text-01: #caf3fd;
  --brand-text-02: #a5edfd;
  --brand-text-03: #6fd9f7;
  --brand-text-04: #e0d0ff;
  --brand-text-05: #9ea3fd;

  /* Neutral */
  --neutral-01: #070a0b;
  --neutral-02: #161c1e;
  --neutral-03: #272f31;
  --neutral-04: #51595a;
  --neutral-05: #a8aeaf;
  --neutral-06: #d1e4e9;
  --neutral-07: #f0f7f9;
  --neutral-08: #f9fbfc;

  /* Status */
  --status-default: #d2d2d2;
  --status-success: #0ce396;
  --status-warning: #f8ae79;
  --status-danger: #f97881;
  --status-info: #2ceac7;
  --primary-hover: #0db4be;
  --primary-active: #88ebf1;
  --secondary-hover: #a7baff;
  --secondary-active: #2253ff;

  /* Base */
  --base-06: #9aa1a3;

  /* Status Hover */
  --status-default-hover: rgb(197, 197, 197);
  --status-success-hover: #39fab6;
  --status-warning-hover: #ffbd8e;
  --status-danger-hover: #fc9ba1;
  --status-info-hover: #0fefc7;

  /* Other */
  --accent: #8bffff; // accent-01 on figma
  --accent-02: #484daf5b; // accent-02 on figma
  --accent-overlay: #b098e2; // accent-02 on figma
  --eighty-percent-black: #000000cc;
  --sixty-percent-black: #00000099;

  /* Gradient */
  --gradient-01: linear-gradient(270.36deg, #86b6ff 1.57%, #18dfec 96.46%);
  --gradient-02: linear-gradient(270.36deg, #1de8f5 1.57%, #4b93ff 96.46%);
  --gamecard-title-color: var(--eighty-percent-black);
  --gradient-gamecard: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.418) 1.8%,
    var(--gamecard-title-color) 45%
  );
  --gradient-body-background: linear-gradient(
    90deg,
    var(--background-darker) -32px,
    var(--body-background) 64px,
    var(--body-background) 100%
  );
}

body {
  color: var(--text-default);
  background: var(--body-background);
}

a {
  color: var(--text-default);
  text-decoration: none;
}

.simple-keyboard-wrapper {
  .hg-button {
    background: var(--osk-button-background);
    border-color: var(--osk-button-border);
    color: var(--text-default);
  }

  .hg-button.hg-activeButton {
    background: var(--osk-button-border);
    border-color: var(--osk-button-border);
    color: var(--text-default);
  }
}

h1,
h2,
h3 {
  color: var(--text-default);
}

.gogIcon {
  fill: var(--text-default);
}
